<template>
  <n-drawer
    v-model:show="showDrawer"
    :width="width"
    :placement="placement"
    resizable
  >
    <n-drawer-content>
      <template #header>
        {{ title }}
      </template>
      <slot></slot>
      <!-- <template #footer>
        <n-button>Footer</n-button>
      </template> -->
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { useBoolean } from "@/hooks/bool";
import { DrawerPlacement } from "naive-ui";
import { ZDrawerMethods } from "./typings";

export interface ZDrawerProps {
  placement?: DrawerPlacement;
  width?: number | string;
  title: string;
  // hasFormAction?: boolean;
  // submitActionText?: string;
  // resetActionText?: string;
}
const props = withDefaults(defineProps<ZDrawerProps>(), {
  placement: "right",
  title: "",
  width: "80%",
  // hasFormAction: true,
  // submitActionText: "提交",
  // resetActionText: "重置",
});

const [showDrawer, open, close] = useBoolean();
const methods: ZDrawerMethods = {
  open,
  close,
};

/* expose */
defineExpose(methods);
</script>
